<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
		<link rel="stylesheet" href="../../css/weui.css">
		<link rel="stylesheet" href="../../css/jQuery_WeUI.css">
		<style type="text/css">
			.aui-list-item.wechat-top {
				background-color: #f3f3f7;
			}
			.aui-list .wechat-avatar {
				width: 2.8rem;
			}
			.wechat-avatar .aui-row-padded {
				background-color: #dddee0;
				padding: 0.1rem;
				border-radius: 0.2rem;
				margin-left: -0.05rem;
				margin-right: -0.05rem;
			}
			.wechat-avatar, .wechat-avatar > img {
				border-radius: 0.3rem;
				/*max-height: 2.5rem;*/
			}
			.aui-list {
				border-top: none;
			}
			@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
				.aui-list {
					border: none;
					background-size: 100% 0px;
				}
			}
			.menus {
				padding-left: 1rem;
				padding-right: 1rem;
				background: #FFFFFF;

				/*margin-bottom: 0.5rem;*/
			}
			.aui-tab-item {
				color: #555;
				font-size: 0.8rem;
			}
			.aui-active{
				background: #DBE0F0
			}

	.fid_item img{
		display: inline-block;
	}
		</style>
	</head>
	<body onload="refresh()">
		<!-- <div id="app"> -->

		<!-- </div> -->
		<div id="app" v-cloak >
			<div class="fid_content" v-show="show_add" style="border-radius:8px">
				<div class="fid_item" tapmode v-myclick="scanner"><img v-src="'../../image/scan.png'" ><span style="padding-left:5px">扫一扫</span></div>
				<div class="fid_item" tapmode v-myclick="add_friend" ><img v-src="'../../image/add_friend.png'"><span style="padding-left:5px">添加好友</span></div>
				<div style="border:none" class="fid_item" tapmode v-myclick="create_group" ><img v-src="'../../image/friends.png'"><span style="padding-left:5px">创建家族</span></div>
			</div>

			<div class="weui-search-bar" id="searchBar">
				<form class="weui-search-bar__form" onsubmit="return searchKeyword()" >
					<div class="weui-search-bar__box">
						<i class="weui-icon-search"></i>
						<input type="search" v-model="keyword" onblur="showFriendBox()" class="weui-search-bar__input" id="searchInput"  placeholder="搜索" required="">
						<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
					</div>
					<label class="weui-search-bar__label" id="searchText">
						<i class="weui-icon-search"></i>
						<span>搜索</span>
					</label>
				</form>
				<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel" v-if="show_btn">取消</a>
			</div>
			<div class="searchFriendsBox" v-show="show_btn">
				<ul class="aui-list aui-media-list" >
		      <li  class="aui-list-item aui-list-item-middle" tapmode v-myclick="[item, startchatone]" v-for="(item, index) in lists">
		          <div class="aui-media-list-item-inner" >
		              <div class="aui-list-item-media wechat-avatar">
		                <img v-image-resize="{src:item.portrait?item.portrait:'../res/tx00.jpg'}"/>
		              </div>
		              <div class="aui-list-item-inner">
		                  <div class="aui-list-item-text">
		                      <div class="aui-list-item-title">{{item.nickname}}</div>
		                  </div>
		                  <div class="aui-list-item-text aui-font-size-12">{{item.cow}}头奶牛</div>
		              </div>
		          </div>
		      </li>
		    </ul>
			</div>
			<div class="friendBox" v-show="!show_btn">
			<div class="row-container" style="margin-top:15px">
	      <a  v-myclick="new_friends" class="row row-line" v-row-active.tapmode>
	         <img  class="row-arrow row-arrow-left" v-src="'../../image/2_newfriend_1.png'">
	          <span class="user-setrow">新的朋友</span>
	          <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
						<span class="user-setrow" style="float:right;color:#d43f3a;">
							<div class="aui-badge" style="position:relative;top:0; left:0" v-show="applycount>0">{{applycount}}</div>
						</span>
	      </a>
	    </div>
			<div class="menu-top-tap">
				<div class="tap-item" :class="{tap_active:status == 0}" v-myclick="[0, checkStatus]" >好友</div>
				<div class="tap-item" :class="{tap_active:status == 1}" v-myclick="[1, checkStatus]">家族</div>
			</div>
		<div class="aui-content aui-margin-b-15 friends" v-show="status==0">
		<div v-for="(items, index) in memberlists">
			<div style="text-indent:5px">{{index}}</div>
			<ul class="aui-list aui-media-list">
				<li  class="aui-list-item aui-list-item-middle" :key="item.member_id" tapmode v-myclick="[item, startchatone]" v-for="(item, index) in items">
					<div class="aui-media-list-item-inner weui-cell__bd">
							<div class="aui-list-item-media wechat-avatar" >
									<img :src="item.portrait || '../../image/portrait_moren.png'"/></div>
							<div class="aui-list-item-inner">
									<div class="aui-list-item-text">
											<div class="aui-list-item-title">{{item.mark_name?item.mark_name:item.nickname}}</div>
									</div>
									<div class="aui-list-item-text aui-font-size-12">{{check(item.add_type)}}</div>
							</div>
					</div>
				</li>
			</ul>
		</div>
		<div  v-show="JSON.stringify(memberlists)=='{}'" style="text-align:center;margin-top:60px">
			<img v-src="'../../image/empty.png'" style="margin:0 auto;width:30%">
			<div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">您还没有好友</div>
		</div>
		</div>
		<div class="aui-content aui-margin-b-15 groups" v-show="status==1">
		<div v-for="(items, index) in grouplists" >
			<div style="text-indent:5px">{{index}}</div>
			<ul class="aui-list aui-media-list">
				<li  class="aui-list-item aui-list-item-middle weui-cell" tapmode :key="item.clan_id" v-myclick="[item, startchat]" v-for="(item, index) in items">
					<div class="aui-media-list-item-inner weui-cell__bd">
							<div class="aui-list-item-media wechat-avatar">
									<img :src="item.portrait || '../../image/portrait_moren.png'"/></div>
							<div class="aui-list-item-inner">
									<div class="aui-list-item-text">
											<div class="aui-list-item-title">{{item.name}}</div>
									</div>
							</div>
					</div>
				</li>
			</ul>
		</div>
		<div  v-show="JSON.stringify(grouplists)=='{}'" style="text-align:center;margin-top:60px">
			<img v-src="'../../image/empty.png'" style="margin:0 auto;width:30%">
			<div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">您还没有家族</div>
		</div>
		</div>
		</div>
	</div>
		<!-- <div class="spinner">
			<div class="bounce1"></div>
			<div class="bounce2"></div>
			<div class="bounce3"></div>
		</div> -->
	<!-- </div> -->
	</body>
	<script src="../../script/aui-tab.js" ></script>
  <script src="../../script/aui-dialog.js" ></script>
	<script src="../../script/api.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/url.js"></script>
	<script src="../../script/sha1.min.js"></script>
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script src="../../script/jQuery_WeUI.js"></script>

	<script type="text/javascript">
	  var memberlists;
		var grouplists;
		var vm;
		apiready = function() {
			setBSImg();
			$api.fixStatusBar($api.dom('.aui-bar-nav'));
			$api.css($api.dom("#friends"), 'display:block');
			FNScanner  = api.require('FNScanner');

			showProgress();
			var data = {
					member_id: getPrefs('member_id'),
			};
			var callback = function (ret) {
					contents = ret.content;
					memberlists = objKeySort(contents.friends);
					grouplists = objKeySort(contents.clans);
					applycount = contents.applycount;

					initApp();
					addEventListener();

					api.parseTapmode();
			};
			pinet.post(URL.getClansAndFriends, data, callback);
			setRefreshHeaderInfo(refresh);
		}

		function objKeySort(obj) {//排序的函数
    var newkey = Object.keys(obj).sort();
　　//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
    var newObj = {};//创建一个新的对象，用于存放排好序的键值对
    for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
        newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
    }
    return newObj;//返回排好序的新对象
}

			function check(state) {
				switch (state) {
				 case '1':
				return '来源于好友搜索';
				break;
				 case '2':
				return '来源于家族添加';
				break;
					case '3':
				return '来源于二维码添加';
				break;
					case '4':
				return '来源于邀请新用户';
				break;
				 default:
				 return '自己';

				}
			}
		function refresh() {
			var data = {
					member_id: getPrefs('member_id'),
			};
			var callback = function (ret) {
					var contents = ret.content;
					vm.memberlists = objKeySort(contents.friends);
					vm.grouplists = objKeySort(contents.clans);
					vm.applycount = contents.applycount;
					api.refreshHeaderLoadDone();
			};
			pinet.post(URL.getClansAndFriends, data, callback);
		}

		function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                memberlists:memberlists,
								grouplists:grouplists,
								applycount:applycount,
								show_add: 0,
								status: 0,
								keyword: '',
								lists: [],
								show_btn:false
            },
						mounted:function(){
							this.getFriend();
						},
            computed: {
            },
            methods: {
							hide:function () {
								this.show_add=false;
							},
							getFriend:function(){
								var data = {
										member_id: getPrefs('member_id'),
								};
								var callback = function (ret) {
										var content = ret.content;
										setPrefs('friends_mark',JSON.stringify(content))
								};
								pinet.post(URL.userFriends, data, callback);
							},
							reload:function(){
								vm.memberlists ={};
								vm.grouplists ={};
								var data = {
										member_id: getPrefs('member_id'),
								};
								var callback = function (ret) {

										var contents = ret.content;
										vm.memberlists = objKeySort(contents.friends);
										vm.grouplists = objKeySort(contents.clans);
										vm.applycount = contents.applycount;
								};
								pinet.post(URL.getClansAndFriends, data, callback);
							},

              startchat:function(group){
								api.openWin({
									reload : true,
									name : 'win_group',
									url : '../win/win_group.html',
									vScrollBarEnabled : false,
									pageParam : {
										group_id : group.clan_id,
										clan_im_id : group.clan_im_id,
										group_tx : group.portrait,
										group_zh : group.name
									}
								});

              },
							new_friends:function(){
								api.openWin({
									reload : true,
									name : 'new_friends',
									url : '../chat/new_friends.html',
									vScrollBarEnabled : false,
								});
							},
							startchatone:function(member){
								var friend_id = member.member_id;
								if(friend_id==getPrefs('member_id')){
									return false;
								}
								this.lists = []
								api.openWin({
									reload : true,
									name : 'friend_info',
									url : '../chat/friend_info.html',
									vScrollBarEnabled : false,
									pageParam : {
										uid : member.friend_id,
									}
								});
							},
							checkStatus:function(status){
								vm.status = status;
							},
							scanner:function(){
							this.show_add =false;
							FNScanner.open({
									autorotation: true
							}, function(ret, err) {
									if (ret) {
										url = ret.content;
										if(url){
											var memberId = getPrefs('member_id')
											var urlMemberId = url.split('member_id=')[1]
											if( memberId == urlMemberId){
												pinet.alert('请勿扫描自己的二维码')
												return
											}
											if( url.indexOf('type=addfriends&member_id=') < 0 && url.indexOf('type=addgroup&groupid=') < 0 ){
                        pinet.alert('请扫描正确的二维码')
                        return
                      }
											if(url.indexOf('type=addfriends&member_id=') >= 0 ){
												var url = url.split("member_id=");
												user_id = url[url.length-1];
												api.openWin({
													reload : true,
													name : 'member_info',
													url : '../user/member_info.html',
													vScrollBarEnabled : false,
													pageParam : {
														uid : user_id,
														from_type:3
													}
												});
											}
											if(url.indexOf('type=addgroup&groupid=') >= 0 ){
												var url = url.split("groupid=");
												groupid = url[url.length-1];
												var params = {
														clan_unique_id: groupid,
														member_id: getPrefs('member_id'),
												};
												var callback = function (ret) {
														var get_info = ret.content;
														var clan_info = get_info[0];
														var is_in_clan  = clan_info.is_in_clan;
														if(is_in_clan!=1){
															api.openWin({
																reload : true,
																name : 'member_info',
																url : '../chat/search_group_info.html',
																vScrollBarEnabled : false,
																pageParam : {
																	item : clan_info,
																	from_type : 13
																}
															});
														}else{
															api.openWin({
																reload : true,
																name : 'frame_group_info',
																url : '../frame/frame_group_info.html',
																hScrollBarEnabled : false,
																pageParam : {
																	group_id : clan_info.clan_id,
																	from_type : 13
																}
															});
														}
												};
												pinet.post(URL.searchClan, params, callback);
											}
										}
									} else {
											alert(JSON.stringify(err));
									}
							});
						},
						add_friend:function(){
							this.show_add =false;
							api.openWin({
								reload : true,
								name : 'addsearch',
								url : '../user/addsearch.html',
								vScrollBarEnabled : false,
							});
						},
						create_group:function(){
							this.show_add =false;
							api.openWin({
								reload : true,
								name : 'create_group',
								url : '../chat/create_group.html',
								vScrollBarEnabled : false,
							});
						}
					},
					watch: {
						keyword: function (newVaL) {
							if(newVaL.length>0){
								searchKeyword();
								this.show_btn = true;
							}else{
								this.show_btn = false
								this.keyword = ''
								refresh()
							}
						},
					}
        });
			// return vm
    }
		var tab = new auiTab({
			element : document.getElementById("tab"),
		}, function(ret) {
			if (ret.index == 1) {
				$api.css($api.dom(".friends"), 'display:block');
				$api.css($api.dom('.groups'), 'display: none');
			} else if (ret.index == 2) {
				$api.css($api.dom(".groups"), 'display:block');
				$api.css($api.dom('.friends'), 'display: none');
			} else if (ret.index == 3) {
				$api.css($api.dom(".groups"), 'display:block');
				$api.css($api.dom('.friends'), 'display: none');
			}
		});
		function li(id, zh, tx) {
			api.openWin({
				reload : true,
				name : 'chat',
				url : 'win_chat.html',
				vScrollBarEnabled : false,
				pageParam : {
					id : id,
					zh : zh,
					tx : tx
				}
			});
		}

		function addEventListener(){

			api.addEventListener({
				name: 'switch_to_frame_1'
				}, function (ret, err) {
					vm.reload();
			});

			api.addEventListener({
				name : 'updateClan'
			}, function(ret, err) {
				vm.reload();
			});
			api.addEventListener({
					name: 'show_add1'
			}, function (ret) {
					var value = ret.value.show_add;
					vm.show_add = value;
			});
			api.addEventListener({
					name: 'close_add'
			}, function (ret) {
					vm.show_add = false;
			});
			api.addEventListener({
					name: 'new_friends'
			}, function (ret) {
					vm.reload();
			});

			api.addEventListener({
					name: 'updfriend'
			}, function (ret, err) {
					vm.reload();
					vm.getFriend();
			});
		}
		function searchKeyword() {
    var key = document.getElementById('searchInput').value;
    var data = {
        member_id: getPrefs('member_id'),
        keywords: key
    };
    var callback = function (ret) {
        vm.lists = ret.content;
    };
    pinet.post(URL.getFriendsByKeyWords, data, callback);
    return false;
		}

		function showFriendBox () {
			vm.keyword = ''
		}


	</script>
</html>
